<template>
  <!--  组件结构-->
  <div class="demo">
    <h2>学校名称：{{ myName }}</h2>
    <h2>学校地址：{{ myAddress }}</h2>
    <h2>办学时长：{{ myAge + 1 }}</h2>
    <button @click="updateAge">点我修改办学时长</button>
  </div>
</template>

<script>
//组件脚本
// <!--    组件-->
export default {
  name: 'School',
  data() {
    return {
      myName: this.name,
      myAddress: this.address,
      myAge: this.age
    }
  },
  methods:{
    updateAge() {
      // 外部传进来的数据最好不要修改，可以赋值为自己的属性在修改
      // this.age++
      this.myAge += 9
    },
  },
  // props:['name', 'address', 'age']  简单声明接收

//   接收后增加类型校验
/*  props:{
    name: String,
    address: String,
    age: Number,
  }*/

  //   接收后增加类型校验 + 是否必穿 + 默认值
  props:{
    name:{
      type: String,
      required: true
    },
    address:{
      type: String,
      required: true
    },
    age:{
      type: Number,
      default: 66
    },
  }
};

</script>

<style scoped lang="less">
//组件样式
.demo {
  background: bisque;
}
</style>
